<!DOCTYPE html> <html>
<head>
<title>12 Grid</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='container showme'>
      <pre>
&lt;div class="row"&gt;
    &lt;div class="col-*"&gt;&lt;/div&gt;
&lt;/div&gt;

col-xs-*             width:?%
col-xs-offset-*  margin-left:?%

* : 1-12

xs  手机
sm  平板 >768px
md  电脑 >992px
lg  大屏幕 >1200px

屏幕越小越隐藏
.hidden-dn-sm {display: none!important;}/*手机 隐藏*/
.hidden-dn-md {display: none!important;}/*手机 平板 隐藏*/
.hidden-dn-lg {display: none!important;}/*手机 平板 电脑 隐藏*/
屏幕越大越隐藏
.hidden-up-sm {display: none!important;}/*平板 电脑 巨幕 隐藏*/
.hidden-up-md {display: none!important;}/*电脑 巨幕 隐藏*/
.hidden-up-lg {display: none!important;}/*巨幕 隐藏*/
</pre>
      响应式:
    <div class="row">
      <div class="col-xs-3 col-md-1" style="background:#1E9FFF;">xs3 md1</div>
      <div class="col-xs-3 col-md-1" style="background:#0ff000;">xs3 md1</div>
      <div class="col-xs-3 col-md-1" style="background:#00ff00;">xs3 md1</div>
      <div class="col-xs-3 col-md-1" style="background:#000ff0;">xs3 md1</div>
      <div class="col-xs-4 col-md-1" style="background:#0000ff;">xs4 md1</div>
      <div class="col-xs-4 col-md-1" style="background:#f0000f;">xs4 md1</div>
      <div class="col-xs-4 col-md-1" style="background:#fff000;">xs4 md1</div>
      <div class="col-xs-5 col-md-1" style="background:#0fff00;">xs5 md1</div>
      <div class="col-xs-3 col-md-1" style="background:#00fff0;">xs3 md1</div>
      <div class="col-xs-4 col-md-1" style="background:#000fff;">xs4 md1</div>
      <div class="col-xs-6 col-md-1" style="background:#f000ff;">xs6 md1</div>
      <div class="col-xs-6 col-md-1" style="background:#ff000f;">xs6 md1</div>
    </div>
      66%，33%:
    <div class="row">
      <div class="col-xs-8" style="background:#1E9FFF;">xs8</div>
      <div class="col-xs-4" style="background:#0ff000;">xs4</div>
    </div>
      33%，33%，33%:
    <div class="row">
      <div class="col-xs-4" style="background:#1E9FFF;">xs4</div>
      <div class="col-xs-4" style="background:#0ff000;">xs4</div>
      <div class="col-xs-4" style="background:#00ff00;">xs4</div>
    </div>
      50%，50%:
    <div class="row">
      <div class="col-xs-6" style="background:#1E9FFF;">xs6</div>
      <div class="col-xs-6" style="background:#0ff000;">xs6</div>
    </div>
      嵌套效果:
    <div class="row">
      <div class="col-xs-3 col-md-1" style="background:#1E9Fff;">xs3 md1</div>
      <div class="col-xs-9 col-md-11" style="background:#0ff000;">
            xs9 md11
          <div class="row">
            <div class="col-xs-6" style="background:#f000ff;">Nxs6</div>
            <div class="col-xs-6" style="background:#ff000f;">Nxs6</div>
          </div>
      </div>
    </div>
  </div>
</body></html>